前言

今天要教大家如何使用按鈕 Button ， Button 在許多時候都會用到，本篇文章會帶大家建立自己喜歡的 Button~

Button 按鈕

A control that initiates an action.

Button 官方文件

寫法有以下兩種：

Button(action: 動作函式) {
    外觀內容//可以是文字、圖片等等
}

Button("按鈕文字", action: 動作函式)

可以用圖片、文字等等的當作按鈕。

這裡可以發現加上 button 的文字變成可以點擊了（要在 preview 中執行）
p.s.按下 canvas 中的播放鍵（run），才能點擊按鈕。

Button (action:signIn){
            	Text("PressMe")
            	    .foregroundColor(Color.white)
            	    .multilineTextAlignment(.center)
            	    .padding(0.0)
            	    .frame(width: 200, height: 50)
            	    .background(Color.purple)
            	    .clipShape(RoundedRectangle(cornerRadius: 15))
            	    .shadow(radius: 5)
            }

左邊展示使用文字當作按鈕、右邊使用圖片當作按鈕。

按鈕外觀

button role 讓按鈕有特別的警示或引導作用

Button(role: .destructive){}
Button(role: .cancel){}

以下有一些不同的外觀大家可以自己試試～
這邊只提出幾個我自己常用的。
button 也可以客制顏色等等的...

.buttonStyle(.bordered)
.buttonBorderShape(.capsule)
.buttonBorderShape(.roundedRectangle(radius: 12))

其他的 button 教學文章

State 變數 -- 使用範例

State 官方文件

State 變數是能夠改變其內容的一種變數。

這邊我用了一個 State 變數，透過按鈕來操作改變變數內容。

＊當按下 true ， 變數值將變成 true 、對應到 isPressed ? "yes":"no" 中的 yes按下 false 則反之。

以下是範例程式：

 @State private var isPressed=true

VStack{
    HStack{
	Button(action:{
	    self.isPressed=true
	        }) {
	        Text("true")
	        }.padding(10)
	        
	Button(action: {
	    self.isPressed=false
	        }) {
	        Text("false")
	        }.padding(10)
        
	}.buttonStyle(.bordered)//此行包在 hstack 外面
	        //上方是button的code
	    Text(isPressed ? "yes":"no")//判斷 ispressed 來顯示 yes or no
    }

也可以用 toggle 按鈕操作
在上方程式碼加上以下的 code

Button(isPressed ? "Pause" : "Play") {                 
    isPressed.toggle()
    }

toggle button 的文字能隨著變數改變。

大家可以自行玩玩看～

今天的教學就到這邊啦～
歡迎大家多多閱讀我的文章～